<template>
  <div id="mainHeader" class="main-head" :style="{ height: $store.state.sizes.mainHead }">
    <el-row>
      <el-col :span="8" v-if="flag.title">
        <slot name="title"></slot>
      </el-col>
      <el-col :span="flag.title ? 16 : 24">
        <el-row type="flex" justify="end">
          <span v-for="term in terms">
            <el-date-picker :size="$store.state.size" v-if="term.datePicker" v-model="example[term.code]"
              :value-format="term.valueFormat" :type="term.type" :class="term.claze ? term.claze : 'query-medium'"
              :placeholder="term.desc"></el-date-picker>
            <el-select :size="$store.state.size" v-if="term.dict" v-model="example[term.code]"
              :class="term.claze ? term.claze : 'query-medium'" :placeholder="term.desc" :filterable="term.filterable"
              clearable>
              <el-option v-for="(val, key, i) in $store.state.dict[term.dict]" :key="key" :value="key" :label="val" />
            </el-select>
            <el-input :size="$store.state.size" v-if="!term.datePicker && !term.dict" v-model="example[term.code]"
              :class="term.claze ? term.claze : 'query-medium'" :placeholder="term.desc" clearable />
          </span>
          <el-button :size="$store.state.size" type="primary" icon="el-icon-search" @click="$emit('query')"
            v-if="flag.list"> 查询
          </el-button>
          <el-button :size="$store.state.size" type="success" icon="el-icon-plus" @click="$emit('add')" v-if="flag.save">
            添加{{name}}
          </el-button>
          <slot name="header"></slot>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    Vue,
    Component,
    Prop
  } from "vue-property-decorator";

  @Component
  export default class MainHeader extends Vue {
    @Prop({
      type: String
    }) name;

    @Prop({
      type: Object
    }) flag;

    @Prop({
      type: Array
    }) terms;

    @Prop({
      type: Object
    }) example;

    created() {} //生命周期 - 创建完成（可以访问当前this实例）
    mounted() {} //生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate() {} //生命周期 - 创建之前
    beforeMount() {} //生命周期 - 挂载之前
    beforeUpdate() {} //生命周期 - 更新之前
    updated() {} //生命周期 - 更新之后
    beforeDestroy() {} //生命周期 - 销毁之前
    destroyed() {} //生命周期 - 销毁完成
    activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
  }
</script>
<style scoped>

</style>
